<template>
  <div class="order-page">
    <headBar  isBack="show">
      <div slot="xm-header-center">
        <div class="xm-header-title" >采购单详情</div>
      </div>
      <div slot="xm-header-right"></div>
    </headBar>
    <div class="order-group">
      <div class="flex flex-pack-justify consignee-info">
        <div>收货人：{{data.contacts}}</div>
        <div>{{data.phone}}</div>
      </div>
      <p class="address-info border-bottom">收货地址：{{data.addressName}}</p>
      <div class="order-info">
        <p class="flex flex-pack-justify">

          <span>总价：<price :priceUnit="totalMoney" unitName=""></price></span> <span>商品种类：{{goodsNum}}种</span>

        </p>
        <p class="flex flex-pack-justify color9">
          <span>来源：{{data.nameSub | filterNameSub}}</span>
          <span>{{data.supplierName || ''}}</span>
        </p>
      </div>
    </div>
    <!--没有选购商品-->
    <div class="no-goods" v-show="totalMoney==0">
      该地址没有选购商品
    </div>
    <div class="cate-group flex border-bottom" v-for="item in data.wareInfoList">
      <div class="group-left">
        <img :src="item.mainImage">
      </div>
      <div class="group-right flex-1">
        <h3>{{item.wareName}}</h3>
        <div >
          <p>
            <span class="font26 color9">批发价：</span>
            <price :priceUnit="item.pricePiece" unitName="件"></price>
          </p>
          <div class="opts flex flex-pack-justify">
            <div class="delete" @click="deleteGoods(item)">删除</div>
            <div class="border-1px flex">
              <span class="opt" @click="numMinus(item)">-</span>
              <span class="num" >{{item.number}}</span>
              <span class="opt" @click="numPlus(item)">+</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn btn1 ok" @click="pruchaseModify">确定</div>
  </div>
</template>
<script>
  let userName = '';
  export default {
    props: {},
    data() {
      return {
        addressId: '',
        data: {},
        totalMoney: 0,
        goodsNum: 0, //商品种类
        processStatus: 1
      };
    },
    methods: {
      numMinus(item){
        let minNum = item.numberWholesale || 1;
        if(item.number>minNum){
          item.number--;
          this.compute();
        }
      },
      numPlus(item){
        item.number++;
        this.compute();
      },
      //获取采购单详情
      getDetail(){
        getPurchaseDetail({addressId: this.addressId, processStatus: this.processStatus}).then(data=>{
          if(data.returnCode == '000000'){
            this.data = data.result;
            this.totalMoney = this.data.amountTotal;
            this.goodsNum = this.data.wareInfoList.length;
          }
        })
      },
      //计算总金额
      compute(){
        this.totalMoney = 0;
        this.goodsNum = this.data.wareInfoList.length;
        [].forEach.call(this.data.wareInfoList, (item)=>{
          this.totalMoney += parseInt(item.number) * parseFloat(item.pricePiece);
        });
      },
      /**
       * 删除商品
       * @param <string> 商品id
       * */
      deleteGoods(item){
        MessageBox.confirm('确定删除此商品?').then(action => {
          delShoppingCartById({id: item.id}).then(data=>{
            if(data.returnCode == '000000'){
              this.data.wareInfoList.splice(this.data.wareInfoList.indexOf(item),1);
              this.compute();
            }
          })
        }).catch(cancel =>{
          console.log(cancel);
        });
      },
      /**
       * 修改采购单
       * */
      pruchaseModify(){
        let wareInfoList = [];
        [].forEach.call(this.data.wareInfoList, (item)=>{
          wareInfoList.push({id: item.id, 'number': item.number, wareId: item.wareId});
        });
        let param = {
          addressIds: this.addressId,
          nameSub: this.data.nameSub, //采购商子账号名称
          wareInfoList: wareInfoList
        }
        pruchaseModify(param).then(data=>{
          if(data.returnCode == '000000'){
            history.back();
          }
        })
      }
    },
    filters: {
      filterNameSub(name){
        if(name != userName){
          return name;
        }
        return '自己';
      }
    },
    created() {
      userName = Cookie.get('userName');
      this.addressId = this.$route.params['addressId'];
      this.processStatus = this.$route.params['type'] || 1;
      this.getDetail();
    },
    mounted(){

    },
    components: {
    }
  };
</script>
<style lang="less">
  @import "./detail.less";
</style>
